<template>
  <div class="app-container">
    <div class="details">
      <div class="detailsDiv">
        <div
          class="dialogDom"
          v-if="
            detailsInfo.dataType != 'comment' &&
              detailsInfo.dataType != 'commentReply'
          "
        >
          <div>
            <span>作者ID:</span>
            {{ detailsInfo.author ? detailsInfo.author.id : "-" }}
          </div>
          <div>
            <span>作者昵称:</span>
            {{
              detailsInfo.author
                ? detailsInfo.author.nikename
                : detailsInfo.authorName
            }}
          </div>
          <div>
            <span>作者实名状态:</span>
            {{
              detailsInfo.realStatus == null ? "未认证" : detailsInfo.realStatus
            }}
          </div>
          <div>
            <span>发布IP:</span
            >{{ detailsInfo.publisherIp ? detailsInfo.publisherIp : "-" }}
          </div>
          <div><span>发布网络:</span>-</div>
          <div><span>发布手机型号:</span> -</div>
        </div>
      </div>
      <div class="detailsDiv">
        <div
          class="dialogDom"
          v-if="
            detailsInfo.dataType != 'comment' &&
              detailsInfo.dataType != 'commentReply'
          "
        >
          <div><span>内容观看总数:</span>{{ detailsInfo.previewCount }}</div>
          <div><span>内容收藏数:</span>{{ detailsInfo.collectCount }}</div>
          <div><span>内容点赞数:</span>{{ detailsInfo.likeCount }}</div>
          <div><span>分享转发数:</span>{{ detailsInfo.shareCount }}</div>
          <div>
            <span>预览数:</span
            >{{
              detailsInfo.previewCount == null ? "0" : detailsInfo.previewCount
            }}
          </div>
        </div>
      </div>
      <div class="detailsDiv">
        <div class="dialogDom">
          <div><span>审核人:</span>{{ detailsInfo.auditor }}</div>
          <div>
            <span>发布时间:</span
            >{{ formatTimestamp(parseInt(detailsInfo.publishTime)) }}
          </div>
          <div><span>自动评估风险等级:</span>{{ detailsInfo.tagDesc }}</div>
          <!-- <div><span>审核时间: </span>{{ detailsInfo.auditTime }}</div> -->
        </div>
      </div>
      <div class="detailsDiv">
           <div class="dialogDiv">
            <span>文章ID:</span>
            <div class="dialogDivCon">
              {{ detailsInfo.id }}
            </div>
          </div>
          <div class="dialogDiv">
            <span>文章标签:</span>
            <div class="dialogDivCon">
              {{ detailsInfo.categoryidDesc }}
            </div>
          </div>
          <div class="dialogDiv">
            <span>文章标题:</span>
            <div class="dialogDivCon">{{ detailsInfo.title }}</div>
          </div>
        <div class="dialogDom"><span>文章封面:</span></div>
        <div v-for="(item, index) in detailsInfo.imgPics" class="imgPics">
          <img :src="item" />
        </div>
        <div v-for="(item, index) in detailsInfo.playInfo" class="imgPics">
          <video :src="item.playUrl" controls></video>
        </div>
      </div>
      <div class="detailsDiv">
        <div>
          <div class="dialogDiv" v-if="detailsInfo.dataType == 'article'">
            <span>文章内容:</span>
            <div class="dialogDivCon" v-html="detailsInfo.content"></div>
          </div>
          <div
            class="dialogDiv"
            v-if="
              detailsInfo.dataType == 'comment' ||
                detailsInfo.dataType == 'commentReply'
            "
          >
            <span>评论内容:</span>
            <div class="dialogDivCon" v-html="detailsInfo.commentContent"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { articleDetail } from "@/api/articleRelease/index";
import moment from "moment";
export default {
  name: "articleListDetails",
  data() {
    return {
      outerVisible: false,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      detailsInfo: {},
      queryParams: {
        ipaddr: undefined,
        userName: undefined
      }
    };
  },

  created() {
    this.articleDetail();
  },
  methods: {
    formatTimestamp(timestamp) {
      return moment(timestamp).format("YYYY-MM-DD HH:mm:ss"); // 注意：同上，如果是秒则需要乘以1000
    },
    articleDetail() {
      let data = {
        id: this.$route.query.id,
        userId: this.$route.query.userId
      };
      articleDetail(data).then(res => {
        this.detailsInfo = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.details {
  font-size: 14px;
  color: #666;
  width: 98%;
  margin: 1% auto;
  height: 95%;
  overflow: auto;
}

.detailsDiv {
  border-bottom: 1px solid #e3e3e3;
  margin-bottom: 0.5%;
  padding: 0% 20px;
  background-color: #fff;
  overflow: hidden;
  font-size: 16px;
}

.dialogDom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin: 15px 0;
  color: #999;
  flex-wrap: wrap;

  span {
    color: #333;
    margin-right: 10px;
  }

  > div {
    width: 16%;
    min-width: 250px;
    margin: 10px 0;
  }
}

.dialogDiv {
  margin: 15px 0;
  color: #999;
  margin: 15px 0;
  color: #999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .dialogDivCon {
    width: 50%;

    a {
      text-decoration: underline;
    }
    ::v-deep p {
    }
  }

  span {
    color: #333;
    margin-right: 10px;
  }
}

.imgPics {
  width: 18%;
  display: inline-block;
  margin-bottom: 15px;
  img {
    width: 100%;
    display: block;
  }
}
</style>
